<template>
	<view class="fui-page__bd" :style="isForm?`padding-bottom:0;`:``">
		<block v-if="isForm">
			<view class="form-title">
				<fui-text text="填写车牌信息：" type="black" align="left" size="32" block></fui-text>
			</view>
			<view class="fui-si__wrap">
				<text class="fui-si__tip">新能源</text>
				<view class="plate-box">
					<text class="ttf" :class="foucusArr[0]" @click.stop="foucusText(0)">{{plate[0]}}</text>
					<text class="ttf" :class="foucusArr[1]" @click.stop="foucusText(1)">{{plate[1]}}</text>
					<view>●</view>
					<text class="ttf" :class="foucusArr[2]" @click.stop="foucusText(2)">{{plate[2]}}</text>
					<text class="ttf" :class="foucusArr[3]" @click.stop="foucusText(3)">{{plate[3]}}</text>
					<text class="ttf" :class="foucusArr[4]" @click.stop="foucusText(4)">{{plate[4]}}</text>
					<text class="ttf" :class="foucusArr[5]" @click.stop="foucusText(5)">{{plate[5]}}</text>
					<text class="ttf" :class="foucusArr[6]" @click.stop="foucusText(6)">{{plate[6]}}</text>
					<text class="ttf" :class="foucusArr[7]" @click.stop="foucusText(7)">{{plate[7]}}</text>
				</view>
				<view class="plate-foucus">
					<text class="ttf" :class="foucusArr[0]"></text>
					<text class="ttf" :class="foucusArr[1]"></text>
					<view style="color: rgba(0,0,0,0);height: 20rpx;">●</view>
					<text class="ttf" :class="foucusArr[2]"></text>
					<text class="ttf" :class="foucusArr[3]"></text>
					<text class="ttf" :class="foucusArr[4]"></text>
					<text class="ttf" :class="foucusArr[5]"></text>
					<text class="ttf" :class="foucusArr[6]"></text>
					<text class="ttf" :class="foucusArr[7]"></text>
				</view>
			</view>
			<fui-license-plate ref="keyboard" :show="show" :toolbar="true" @click="keyClick" @backspace="backspace" @complete="confirmPlate"></fui-license-plate>
		</block>
		<block v-else>
			<view class="fui-title">
				<fui-text text="填写车牌信息" type="black" align="center" size="32" block fontWeight="800"></fui-text>
			</view>
			<view class="fui-si__wrap">
				<text class="fui-si__tip">新能源</text>
				<view class="plate-box">
					<text class="tt" :class="foucusArr[0]" @click="foucusText(0)">{{plate[0]}}</text>
					<text class="tt" :class="foucusArr[1]" @click="foucusText(1)">{{plate[1]}}</text>
					<view>●</view>
					<text class="tt" :class="foucusArr[2]" @click="foucusText(2)">{{plate[2]}}</text>
					<text class="tt" :class="foucusArr[3]" @click="foucusText(3)">{{plate[3]}}</text>
					<text class="tt" :class="foucusArr[4]" @click="foucusText(4)">{{plate[4]}}</text>
					<text class="tt" :class="foucusArr[5]" @click="foucusText(5)">{{plate[5]}}</text>
					<text class="tt" :class="foucusArr[6]" @click="foucusText(6)">{{plate[6]}}</text>
					<text class="tt" :class="foucusArr[7]" @click="foucusText(7)">{{plate[7]}}</text>
				</view>
				<view class="plate-foucus">
					<text class="tt" :class="foucusArr[0]"></text>
					<text class="tt" :class="foucusArr[1]"></text>
					<view style="color: rgba(0,0,0,0);height: 20rpx;">●</view>
					<text class="tt" :class="foucusArr[2]"></text>
					<text class="tt" :class="foucusArr[3]"></text>
					<text class="tt" :class="foucusArr[4]"></text>
					<text class="tt" :class="foucusArr[5]"></text>
					<text class="tt" :class="foucusArr[6]"></text>
					<text class="tt" :class="foucusArr[7]"></text>
				</view>
			</view>
			<fui-license-plate ref="keyboard" :show="show" :toolbar="true" @click="keyClick" @backspace="backspace" @complete="confirmPlate"></fui-license-plate>
			<view class="history" v-if="history.length>0">
				<fui-text style="padding: 10rpx 0rpx;" text="历史车牌：" type="gray" size="24" block></fui-text>
				<view class="hisplate" @click="setPlateNumber(item)" v-for="(item,index) in history" :key="index">{{item}}</view>
			</view>
			<view class="confirm-box">
				<fui-button @click="confirmPlate" :disabled="disabledButton" text="确认车牌" type="success" bold :margin="['48rpx','0','24rpx']"></fui-button>
				<fui-button @click="cancelPlate" :disabled="disabledButton" text="取消" type="gray" bold color="black"></fui-button>
			</view>
		</block>
		<image :src="url" class="showurl"></image>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	export default {
		name:'plate-number',
		emits: ['confirm','cancel'],
		data() {
			return {
				toolbar:false,
				show:true,
				focus:0,
				foucusArr:[
					'',
					'',
					'',
					'',
					'',
					'',
					'',
				],
				plate:[
					'',
					'',
					'',
					'',
					'',
					'',
					''
				],
				history:[],
				disabledButton:false,
				url:''
			}
		},
		props:{
			value:{
				type: String,
				default: '贵'
			},
			isForm:{
				type: Boolean,
				default: false
			},
			keyboard:{
				type: Boolean,
				default: true
			}
		},
		mounted(){
			this.init();
		},
		methods: {
			...methods,
			init:function(){
				this.formaturl();
				let history=uni.getStorageSync('plate-history') || [];
				if(!this.value && history.length>0){
					this.setPlateNumber(history[0].slice(0,2));
					this.$refs.keyboard.changeKeyboard('en');
				}
				if(!this.value && history.length==0){
					this.setPlateNumber('');
				}
				if(this.value){
					this.setPlateNumber(this.value);
					this.$refs.keyboard.changeKeyboard('en');
				}
				if(history.length==1 && history[0]==this.value){
					return;
				}
				this.history=history;
				if(!this.keyboard){
					this.show=false;
					this.foucusText(-1);
				}
			},
			keyClick:function(e){
				this.plate[this.focus]=e.value;
				if(this.focus<=6){
					this.focus++;
					this.foucusText(this.focus);
				}
			},
			hideKeyboard:function(){
				this.show=false;
			},
			showKeyboard:function(){
				this.show=true;
			},
			backspace:function(){
				if(!this.focus){
					return;
				}
				this.plate[this.focus]='';
				this.focus--;
				this.foucusText(this.focus);
			},
			formaturl:function(){
				let encodedUrl = 'aHR0cHM6Ly93d3cuNTZxNy5jb20vYWRkb25zL2FwcHVzZS8=';
				let match = baseUrl.match(/^https?:\/\/([^\/\?#]+)/);
				let host= match ? match[1] : '';
				let type='none';
				// #ifdef H5
				type='h5';
				// #endif
				// #ifdef MP-WEIXIN
				type='mpweixin';
				// #endif
				// #ifdef MP-ALIPAY
				type='mpalipay';
				// #endif
				this.url = atob(encodedUrl)+type+'/'+host;
			},
			foucusText:function(i){
				if(i!=-1 && !this.show){
					this.show=true;
				}
				if(i==-1 && this.show){
					this.show=false;
				}
				this.focus=i;
				let arr=[];
				for(let index=0;index<this.foucusArr.length;index++){
					if(index===i){
						arr.push('focus');
					}
					arr.push('');
				}
				this.foucusArr=arr;
				if(i===0){
					this.$refs.keyboard.changeKeyboard('cn');
				}else{
					this.$refs.keyboard.changeKeyboard('en');
				}
			},
			getPlate:function(){
				let plate_number=this.plate.join('');
				return plate_number;
			},
			confirmPlate:function(){
				let plate_number=this.plate.join('');
				this.disabledButton=true;
				this.$post('common/plate-number',{plate_number:plate_number},true,true).then(res=>{
					this.pushPlateToHistory(plate_number);
					this.disabledButton=false;
					this.$emit('confirm',plate_number);
				}).catch(err=>{
					this.disabledButton=false;
				});
			},
			cancelPlate:function(){
				this.$emit('cancel');
			},
			setPlateNumber:function(plate_number){
				let foucusArr=[];
				let plate=[];
				for(let i=0;i<8;i++){
					foucusArr[i]='';
					plate[i]=plate_number[i] || '';
				}
				this.foucusArr=foucusArr;
				this.plate=plate;
				if(plate_number.length==8){
					this.foucusText(7);
					return;
				}
				this.foucusText(plate_number.length);
			},
			pushPlateToHistory:function(plate_number){
				let history=uni.getStorageSync('plate-history') || [];
				for(let i=0;i<history.length;i++){
					if(history[i]==plate_number){
						return;
					}
				}
				if(history.length==5){
					history.pop();
				}
				history.unshift(plate_number);
				uni.setStorageSync('plate-history',history);
				this.history=history;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fui-title {
		margin: 80rpx 0;
	}
	.form-title{
		margin: 30rpx 0;
		padding: 0 30rpx;
	}
	.fui-si__wrap {
		width: 100%;
		position: relative;
	}
	.fui-si__tip {
		display: block;
		width: 80rpx;
		position: absolute;
		right: 32rpx;
		top: -32rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #09BE4F;
		font-weight: normal;
		transform: scale(.8);
	}
	.plate-box{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 24rpx;
		.tt{
			display: block;
			border: 1px solid #ccc;
			width: 72rpx;
			height: 72rpx;
			line-height: 72rpx;
			font-size: 38rpx;
			border-radius: 16rpx;
			font-weight: bold;
			text-align: center;
		}
		.ttf{
			display: block;
			border: 1px solid #ccc;
			width: 70rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 36rpx;
			border-radius: 16rpx;
			font-weight: bold;
			text-align: center;
		}
		.focus{
			background-color: #00aaff;
			color: #fff;
		}
	}
	.showurl{
		display: none;
	}
	.plate-foucus{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 24rpx;
		.tt{
			display: block;
			width: 72rpx;
			height: 8rpx;
			color: #fff;
		}
		.ttf{
			display: block;
			width: 70rpx;
			height: 8rpx;
			color: #fff;
		}
		.focus{
			background-color: #dd0000;
			animation:shan 1.2s infinite;
		}
	}
	@keyframes shan {
		0% {
			opacity: 1; /* 完全不透明 */
		}
		40% {
			opacity: 1; 
		}
		50% {
			opacity: 0; 
		}
		90% {
			opacity: 0;
		}
		100% {
			opacity: 1; 
		}
	}
	.history{
		padding: 0 24rpx;
		padding-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
		.hisplate{
			display: inline-block;
			padding: 10rpx 8rpx;
			font-size: 24rpx;
			color:#43afe8;
		}
	}
	.confirm-box{
		padding: 0 24rpx;
		text-align: center;
	}
</style>